<template>
  <div>
    <swiper height="57vw" auto :list="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
    <div class="modules">
      <ul class="clearfix" id="platform_goods_category">
        <li class="swiper-slide platFormMore" v-for="category in home_category" :key="category.categoryId">
          <a :href="category.platForm_category_href">
            <img :src="category.platForm_category_url" alt="">
            <p class="over">{{category.platForm_category_title}}</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="goodBox">
      <div class="single_page">
        <img :src="single_page[0].pic">
      </div>
      <Scroller :scrollbar-x=false lock-y>
        <div class="box1">
          <div class="box1-item">
            <span>1231</span>
          </div>
        </div>
      </Scroller>
    </div>
  </div>
</template>
<script>
  import {
    Swiper,
    SwiperItem,
    Scroller
  } from 'vux'

  export default {
    data() {
      return {
        demo01_list: [{
          url: 'javascript:',
          img: 'https://static.vux.li/demo/1.jpg',
          title: '送你一朵fua'
        }, {
          url: 'javascript:',
          img: 'https://static.vux.li/demo/2.jpg',
          title: '送你一辆车'
        }, {
          url: 'javascript:',
          img: 'https://static.vux.li/demo/5.jpg',
          title: '送你一次旅行',
          fallbackImg: 'https://static.vux.li/demo/3.jpg'
        }],
        demo01_index: 0,
        single_page: [{
          id: 1,
          pic: "http://www.yizan99.com/yizan/upload/20170830/201708301654450297.jpg",
          title: "强总访问火星圆满成功",
          type: 1,
          url_address: "http://www.yizan99.com/yizan/api/v1/basic/SinglePageH5?type=1&single_page_id=1"
        }, {
          id: 2,
          pic: "http://www.yizan99.com/yizan/upload/20170830/201708301753490500.jpg",
          title: "美妆",
          type: 1,
          url_address: "http://www.yizan99.com/yizan/api/v1/basic/SinglePageH5?type=1&single_page_id=2"
        }],
        home_category: [{
            platForm_category_url: 'http://www.yizan99.com/yizan/upload/20170830/201708301712100672.jpg',
            platForm_category_title: '家居生活',
            platForm_category_href: '',
            categoryId: 1
          },
          {
            platForm_category_url: 'http://www.yizan99.com/yizan/upload/20170830/201708301712390297.jpg',
            platForm_category_title: '美妆护肤',
            platForm_category_href: '',
            categoryId: 2
          },
          {
            platForm_category_url: 'http://www.yizan99.com/yizan/upload/20170830/201708301712310782.jpg',
            platForm_category_title: '美食',
            platForm_category_href: '',
            categoryId: 3
          },
          {
            platForm_category_url: 'http://www.yizan99.com/yizan/upload/20170830/201708301701140875.jpg',
            platForm_category_title: '女装',
            platForm_category_href: '',
            categoryId: 4
          },
          {
            platForm_category_url: 'http://www.yizan99.com/yizan/upload/20170830/201708301712540985.jpg',
            platForm_category_title: '手机数码',
            platForm_category_href: '',
            categoryId: 5
          },
          {
            platForm_category_url: 'http://www.yizan99.com/yizan/upload/20170830/201708301713050344.jpg',
            platForm_category_title: '礼品',
            platForm_category_href: '',
            categoryId: 6
          },
          {
            platForm_category_url: 'http://www.yizan99.com/yizan/upload/20170905/201709051128360174.jpg',
            platForm_category_title: '母婴',
            platForm_category_href: '',
            categoryId: 7
          },
          {
            platForm_category_url: './static/img/home/index_more.png',
            platForm_category_title: '更多',
            platForm_category_href: '',
            categoryId: 8
          }
        ]
      }
    },
    components: {
      Swiper,
      SwiperItem,
      Scroller
    },
    methods: {
      demo01_onIndexChange(index) {
        this.demo01_index = index
      }
    }
  }

</script>
<style scoped>
  .modules ul {
    width: 100%;
  }

  .modules ul li {
    float: left;
    width: 25%;
  }

  .modules ul li a {
    display: block;
    height: 100%;
    width: 100%;
    color: #666;
    text-align: center;
    font-size: 17px;
  }

  .modules ul li a img {
    width: 30%;
    margin: 16px auto 0 auto;
  }

  .modules ul li a p {
    font: 12px/30px "microsoft yahei";
  }

</style>
